<template>
	<view class="content attendanceC">
		<!-- <view class="attendanceC-search flex-between">
			<input class="font30" type="text" value="" placeholder="请输入公司、部门" @input="textInput"/>
			<view class="search-btn font30" @click="searchBtn">
				搜索
			</view>
		</view> -->
		<view class="attendanceCs" :class="showLoading?'hidePage':''">
			<view class="noPeople" v-if="peopleList.length<=0 && showList.length<=0">
				暂无搜索记录
			</view>

			<view class="attendanceC-year" style="display: none;">
				<view class="summary-year ">
					<view class="year-cont flex-between">
						<view class="year-left font30">
							2021年
						</view>
						<view class="year-right flex-right">
							<view class="year-prev"></view>
							<view class="year-text font30">
								10月
							</view>
							<view class="year-next"></view>
						</view>
					</view>
				</view>
			</view>

			<!-- 人员列表 -->
			<view class="attendanceC-list" v-if="peopleList.length>0">
				<block v-for="(item,index) in peopleList" :key="index">
					<view class="attendanceC-people" @click="urllink('summary',item.user_id,item.user_name)">
						<text class="font30">{{item.user_name}}</text>
						<text class="font28">{{item.position_name?item.position_name+' | ':''}}{{item.rank_name}}</text>
					</view>
				</block>
			</view>

			<!-- 公司部门列表 -->
			<!-- <view class="attendanceC-list" v-if="showList.length>0">
				<block v-for="(item,index) in showList" :key="index">
					<view class="attendanceC-item" @click="checkCompany(index)">
						<view class="font30 flex-between">
							<text>{{item.ou_name}}</text>
							<image src="../../static/img/more-ico2.png" mode="widthFix"></image>
						</view>
						
					</view>
				</block>
			</view> -->
		</view>
		<lzLoading :showloading='showLoading'></lzLoading>

	</view>
</template>

<script>
	import lxCalendar from '../../components/lx-calendar/lx-calendar.vue';
	import lzLoading from '@/components/lz-loading/lz-loading.vue';
	export default {
		components: {
			lxCalendar,
			lzLoading
		},
		data() {
			return {
				showLoading: true,
				showList: [], //组织列表
				peopleList: [], //人员列表
				changIndex: 0,
				searchText: '', //搜索内容

			}
		},

		onLoad(o) {
			this.changIndex = o.index
			Promise.all([this.postAttendance()]).then((t) => {

			})
		},
		methods: {
			//文字输入
			textInput(e) {
				this.searchText = e.detail.value
			},

			//页面跳转
			urllink(url, id, name) {
				// 跳转到消息
				if (url == 'summary') {
					uni.navigateTo({
						url: "../statistics/summary?id=" + id + "&name=" + name
					})
				}
			},

			//获取考勤权限
			postAttendance() {
				this.showLoading = true
				return new Promise((resolve, reject) => {
					this.$api.getDeptUser({
						ou_id: this.changIndex
					}, true, (res) => {
						this.peopleList = res
						this.showLoading = false
						resolve("success")
					})
					// this.$api.postAttendance({
					// 	name: this.searchText
					// }, true, (res) => {
					// 	this.showList = res.org;
					// 	// this.peopleList = res.member;
					// 	this.peopleList = this.showList[this.changIndex].info.members
					// 	this.showLoading = false
					// 	resolve("success")
					// })
				})
			},

			//搜索
			searchBtn() {
				this.showList = [];
				this.peopleList = [];
				this.postAttendance();
			},

			//切换公司
			checkCompany(e) {
				if (this.showList[e].info.members.length > 0) {
					uni.navigateTo({
						url: "../statistics/peopleList"
					})
				} else {
					uni.showToast({
						title: '没有考勤员工',
						icon: 'none'
					})
				}

				return
				this.peopleList = this.showList[e].info.members
			},

		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #fafafa;

		.attendanceCs {
			transition: all .3s;
			font-weight: 500;
			color: #787878;
		}

		.noPeople {
			padding-top: 20%;
			text-align: center;
		}

		.attendanceC-search {
			padding: 30rpx 4%;
			background: #fff;

			input {
				padding: 20rpx 30rpx;
				background: #FFFFFF;
				border: 1rpx solid #B1B1B1;
				border-radius: 7rpx;
				width: 71%;
			}

			.search-btn {
				padding: 20rpx 30rpx;
				background: #008AFF;
				border-radius: 7rpx;
				color: #fff;
			}
		}

		.summary-year {
			padding: 30rpx 4%;

			.year-cont {
				background: #fafafa;
				border-radius: 7rpx;
			}

			.year-left {
				color: #454545;

			}

			.year-right {
				color: #008AFF;

			}

			.year-prev {
				width: 0;
				height: 0;
				border-width: 16rpx;
				border-style: solid;
				border-color: transparent #008AFF transparent transparent;
			}

			.year-text {
				padding: 0 30rpx;
			}

			.year-next {
				width: 0;
				height: 0;
				border-width: 16rpx;
				border-style: solid;
				border-color: transparent transparent transparent #008AFF;
			}
		}

		.attendanceC-list {
			background: #fff;
			padding: 0 4%;
			border-top: 1rpx solid #eee;

			.attendanceC-item {
				padding: 25rpx 0;

				image {
					width: 12rpx;
				}
			}

			.attendanceC-people {
				font-weight: bold;
				padding: 30rpx 0;
				color: #454545;
				border-bottom: 1rpx solid #F0F0F0;

				text {
					display: block;

					&:last-child {
						font-weight: 500;
						color: #787878;
						margin-top: 10rpx;
					}
				}

				&:first-child {
					// padding-top: 0;
				}

				&:last-child {
					border-bottom: 1rpx solid #fff;
				}
			}
		}
	}
</style>
